<template>
  <div class="map-container">
    <bgHeader title="地图找房" />
    <div class="conter-baidu">
      <baidu-map
        scroll-wheel-zoom
        class="map"
        :dragging="false"
        :zoom="zomm"
        :center="cityL || this.setcityL"
      >
        <bm-overlay
          v-for="(item, index) in oneMapList"
          :key="index"
          pane="labelPane"
          class="sample"
          :class="{ rect: islast }"
          @draw="draw(item, $event)"
          @click.native="myGetNewCityMap(item)"
        >
          <div class="rect-content">
            <span :class="{ rect: islast }">{{ item.label }}</span>
            <span>{{ item.count }}套</span>
          </div>
        </bm-overlay>
        <!--  底部弹出层 -->
        <van-popup
          v-model="isshow"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-cell class="cell-house" title="房屋列表">
            <template #right-icon>
              <span @click="$router.push('/house')">更多房源</span>
            </template>
          </van-cell>
          <gghouseList :getHouseList="houseList" />
        </van-popup>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import bgHeader from '@/components/gbhearder'
import gghouseList from '@/components/gghouseList'
import { getCityMap, getHouse } from '@/api'
import { mapState } from 'vuex'
export default {
  name: 'mapIndex',
  components: {
    bgHeader,
    gghouseList
  },
  props: {},
  data() {
    return {
      oneMapList: [],
      nearby: {
        radius: 1000
      },
      cityL: this.city,
      zomm: 11,
      active: false,
      islast: false,
      value: null,
      // 房屋信息列表
      houseList: [],
      isshow: false
    }
  },
  computed: {
    ...mapState(['city', 'cityValue']),
    setcityL() {
      return this.city
    }
  },
  watch: {},
  created() {
    this.myGetCityMap()
  },
  methods: {
    draw(item, { el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(item.coord.longitude, item.coord.latitude)
      )
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    //  获取城市信息
    async myGetCityMap() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await getCityMap({ id: this.cityValue })
      this.oneMapList = res.body
      this.$toast.clear()
    },
    async myGetNewCityMap({ coord, value }) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      if (this.zomm !== 16) {
        const { data: res } = await getCityMap({ id: value })
        this.oneMapList = res.body
        this.cityL = {
          lat: coord.latitude,
          lng: coord.longitude
        }
      } else {
        this.cityL = {
          lat: coord.latitude,
          lng: coord.longitude
        }
        const { data: res } = await getHouse({ cityId: value })
        this.houseList = res.body.list
        this.isshow = true
      }
      if (this.zomm === 11) {
        this.zomm = 12
        this.value = value
      } else if (this.zomm === 12) {
        this.islast = true
        this.zomm = 16
      } else if (this.zomm === 16) {
        this.zomm = 18
      }
      this.$toast.clear()
    }
  }
}
</script>

<style scoped lang="less">
.conter-baidu {
  width: 100%;
  padding-top: 90px;
  height: 1334px;
  .map {
    width: 100%;
    height: 100%;
  }
}
.sample {
  width: 140px;
  height: 140px;
  padding: 4px !important;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  line-height: 40px;
  box-shadow: 0 0 5px #1db879;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.rect-content {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #1db879;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span {
    width: 132px;
    height: 40px;
  }
}
.rect {
  display: flex;
  width: 200px;
  height: 40px;
  padding: 0;
  background: rgba(12, 181, 106, 0.9);
  color: #fff;
  font-size: 24px;
  border-radius: 5px;
  margin: 5px;
  .rect-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span {
      width: 50%;
      height: 100%;
    }
  }
}
.cell-house {
  height: 131px;
  background-color: #c0c0c2;
}
</style>
